// 自动驾驶模式配置组件 - 基于用户需求说明

import React from 'react';
import { useHmiState } from '../hooks/useHmiState';
import {
  Car,
  Users,
  MapPin,
  Route,
  Play,
  Pause
} from 'lucide-react';

const AutonomousModePanel: React.FC = () => {
  const { userRole } = useHmiState();
  const [currentMode, setCurrentMode] = React.useState('shuttle'); // 接驳模式

  const modes = [
    {
      id: 'shuttle',
      name: '接驳模式',
      description: '多乘客协同、固定路线、高效上下车',
      icon: <Car size={20} />,
      features: ['显示路线', '上车点标记', '目的地标记', '下一站橘色提示', '到站红色提示']
    },
    {
      id: 'taxi',
      name: '接单模式',
      description: '按需接单服务',
      icon: <Users size={20} />,
      features: ['按需接单', '动态路线', '乘客匹配']
    },
    {
      id: 'sightseeing',
      name: '观光模式',
      description: '观光游览服务',
      icon: <MapPin size={20} />,
      features: ['观光路线', '景点介绍', '慢速行驶']
    },
    {
      id: 'convoy',
      name: '组队行驶',
      description: '多车协同行驶',
      icon: <Route size={20} />,
      features: ['车队协调', '同步行驶', '通信连接']
    }
  ];

  const handleModeChange = (modeId: string) => {
    setCurrentMode(modeId);
  };

  return (
    <div className="control-panel">
      <h3 className="text-lg font-semibold mb-4 text-white">自动驾驶模式配置</h3>

      {/* 当前模式显示 */}
      <div className="mb-6">
        <div className="bg-primary-600/20 border border-primary-500/50 rounded-lg p-4">
          <div className="flex items-center gap-3 mb-2">
            {modes.find(m => m.id === currentMode)?.icon}
            <span className="text-lg font-medium text-white">
              {modes.find(m => m.id === currentMode)?.name}
            </span>
          </div>
          <p className="text-sm text-gray-300">
            {modes.find(m => m.id === currentMode)?.description}
          </p>
        </div>
      </div>

      {/* 模式选择 */}
      {userRole.type === 'safety_officer' ? (
        <div className="mb-6">
          <h4 className="text-sm font-medium text-gray-300 mb-3">模式选择</h4>
          <div className="grid grid-cols-2 gap-3">
            {modes.map((mode) => (
              <button
                key={mode.id}
                onClick={() => handleModeChange(mode.id)}
                className={`p-3 rounded-lg border transition-all ${
                  currentMode === mode.id
                    ? 'border-primary-500 bg-primary-600/20 text-primary-400'
                    : 'border-gray-600 bg-gray-800/50 text-gray-300 hover:border-gray-500'
                }`}
              >
                <div className="flex items-center gap-2 mb-1">
                  {mode.icon}
                  <span className="text-sm font-medium">{mode.name}</span>
                </div>
                <p className="text-xs text-gray-400">{mode.description}</p>
              </button>
            ))}
          </div>
        </div>
      ) : (
        <div className="mb-6">
          <div className="text-sm text-gray-400 text-center py-4">
            乘客模式：仅可查看当前模式
          </div>
        </div>
      )}

      {/* 模式功能特性 */}
      <div className="mb-6">
        <h4 className="text-sm font-medium text-gray-300 mb-3">功能特性</h4>
        <div className="space-y-2">
          {modes.find(m => m.id === currentMode)?.features.map((feature, index) => (
            <div key={index} className="flex items-center gap-2 text-sm text-gray-300">
              <div className="w-2 h-2 bg-primary-500 rounded-full" />
              {feature}
            </div>
          ))}
        </div>
      </div>

      {/* 控制按钮 */}
      <div className="grid grid-cols-2 gap-3">
        <button className="hmi-button-primary flex items-center justify-center gap-2">
          <Play size={16} />
          启动模式
        </button>
        <button className="hmi-button-secondary flex items-center justify-center gap-2">
          <Pause size={16} />
          暂停模式
        </button>
      </div>

      {/* 参数配置 - 仅安全员可见 */}
      {userRole.type === 'safety_officer' && (
        <div className="border-t border-gray-700 pt-4 mt-4">
          <h4 className="text-sm font-medium text-gray-300 mb-3">参数配置</h4>
          <div className="space-y-3">
            <div>
              <label className="text-sm text-gray-300 mb-1 block">巡航速度</label>
              <input
                type="range"
                min="20"
                max="60"
                defaultValue="40"
                className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer slider"
              />
            </div>
            <div>
              <label className="text-sm text-gray-300 mb-1 block">车道偏移量</label>
              <input
                type="range"
                min="0"
                max="50"
                defaultValue="10"
                className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer slider"
              />
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default AutonomousModePanel;
